<template>
  <div style="width: 100%">
    <a-menu
      mode="inline"
      theme="light"
      @click="onMenuItemClick"
      :defaultOpenKeys="['emock-about']"
      :selectedKeys="selectedKeys"
    >
      <template v-for="item in moduleMenuList">
        <a-menu-item v-if="!item.children" :key="item.key" >
          <!-- <a-icon type="pie-chart" /> -->
          <span>{{ item.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.key" :menu-info="item" @titleClick="log('titleClick',item)"/>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { Menu } from '@jxstjh/ant-design-vue'
import * as PACKAGE from '../../../../package.json'
import * as clonedeep from 'lodash.clonedeep'
const formatMenu = (arr) => {
  arr.forEach(item => {
    item.key = item.path
    item.url = item.path
    item.title = item.name
    if (item.children && Array.isArray(item.children)) {
      formatMenu(item.children)
    }
  })
}
const SubMenu = {
  template: `
    <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
      <span slot="title">
        <span>{{ menuInfo.title }}</span>
      </span>
      <template v-for="item in menuInfo.children">
        <a-menu-item :item="item" v-if="!item.children" :key="item.key" :info="item">
          <span>{{ item.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.key" :menu-info="item" />
      </template>
    </a-sub-menu>
  `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
const mockModuleMenuList = () => {
  const { module_config: { pages } } = PACKAGE
  const children = clonedeep(pages) || []
  formatMenu(children)
  const config = [
    {
      key: PACKAGE.name,
      url: PACKAGE.name,
      title: '业务模块',
      type: 'module',
      children: children
    }
  ]
  return config
}
export default {
  name: 'ModuleMenu',
  components: { 'sub-menu': SubMenu },
  props: {
  },
  data: () => (
    {
      cacheModuleName: '',
      collapsed: false,
      moduleMenuList: [],
      selectedKeys: [],
      openKeys: [],
      log: console.log
    }
  ),
  watch: {
    '$route': function (nv, ov) {
        // 模块模式
        const key = nv.path.split('/').pop()
        this.selectedKeys = [key]
    }
  },
  created () {
    // this.getModuleMenu()
    this.moduleMenuList = mockModuleMenuList()
  },
  mounted () {
  },
  methods: {
    onMenuItemClick ({ keyPath }) {
    //   const modulePath = keyPath.reverse(1).slice(1).join('/')
    //   this.$router.push({ path: `/portal/module/${modulePath}` })
      const modulePath = keyPath.reverse().join('/')
      this.$router.push({ path: `/portal/module/${PACKAGE.name}/${modulePath}` })
    },
    toggleCollapsed () {
      this.collapsed = !this.collapsed
    },
    getModuleMenu (moduleName) {
    //   setTimeout(() => {
    //     this.moduleMenuList = mockModuleMenuList()
    //     const key = this.$route.path.split('/').pop()
    //     this.selectedKeys = [key]
    //   }, 1000)
    },
    goCardHome () {
    }
  }
}
</script>

<style lang="less" scoped>
</style>
